import React, { Component } from 'react';
import * as echarts from 'echarts';
import { isEqual } from 'lodash';
import { props, state } from './data';
import css from './index.module.less';

class index extends Component<props, state> {
  myRef: React.RefObject<any>;

  constructor(props:props) {
    super(props);
    this.myRef = React.createRef();
    this.state = {
      xdata: [], // x轴数据
      ydata1: [], // y1数据
      ydata2: [], // y2数据
    };
  }

  componentDidMount() {
    this.dataRendaer();
  }

  componentDidUpdate(preProps:props) {
    // eslint-disable-next-line react/destructuring-assignment
    if (!isEqual(this.props.data, preProps.data)) {
      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({
        xdata: [],
        ydata1: [],
        ydata2: [],
      }, () => {
        this.dataRendaer();
      });
    }
  }

  // 处理echarts数据
  dataRendaer = () => {
    const { data } = this.props;
    const { xdata, ydata1, ydata2 } = this.state;
    data.forEach((item:any) => {
      xdata.push(item.time);
      ydata1.push(item.online);
      ydata2.push(item.newly_added);
    });
    this.echartInit();
  }

  // 图表初始化
  echartInit = () => {
    const demo:any = this.myRef?.current;
    const myChart = demo && echarts.init(demo);
    const { xdata, ydata1, ydata2 } = this.state;
    const series = [
      {
        name: '在线人数',
        data: ydata1,
        type: 'line',
        tooltip: {
          trigger: 'axis',
        },
        yAxisIndex: 0,
        smooth: true,
        symbol: 'circle', // 折点设定为实心点
        symbolSize: 8, // 设定实心点的大小
        itemStyle: {
          normal: {
            color: 'rgb(255,101,79)', // 折点颜色
            lineStyle: {
              color: 'rgb(255,101,79)', // 折线颜色
            },
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(255,101,79,0.4)', // 渐变上边颜色
            }, {
              offset: 1,
              color: 'transparent', // 渐变下边颜色
            }]),
          },
        },
      },
      {
        name: '新增人数',
        data: ydata2,
        type: 'line',
        tooltip: {
          trigger: 'axis',
        },
        yAxisIndex: 1,
        smooth: true,
        symbol: 'circle', // 折点设定为实心点
        symbolSize: 8, // 设定实心点的大小
        itemStyle: {
          normal: {
            color: 'rgb(86,211,189)', // 折点颜色
            lineStyle: {
              color: 'rgb(86,211,189)', // 折线颜色
            },
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(86,211,189,0.4)', // 渐变上边颜色
            }, {
              offset: 1,
              color: 'transparent', // 渐变下边颜色
            }]),
          },
        },
      },
    ];
    const option = {
      legend: {
        orient: 'horizontal',
        data: [
          {
            name: '在线人数',
            icon: 'rect',
          },
          {
            name: '新增人数',
            icon: 'rect',
          },
        ],
        itemWidth: 25,
        itemHeigh: 60,
        textStyle: {
          fontSize: 14, // 字体大小
          color: 'rgba(164,176,226,.5)', // 字体颜色
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xdata,
        splitNumber: 15,
        axisLabel: { // 坐标轴刻度标签的相关设置。
          color: 'rgba(164,176,226,.5)',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 12,
          formatter(params: any) {
            let newParamsName = '';
            const paramsNameNumber = params.length;
            const provideNumber = 10; // 一行显示几个字
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (let p = 0; p < rowNumber; p += 1) {
                let tempStr = '';
                const start = p * provideNumber;
                const end = start + provideNumber;
                if (p === rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = `${params.substring(start, end)}\n`;
                }
                newParamsName += tempStr;
              }
            } else {
              newParamsName = params;
            }
            return newParamsName;
          },
        // rotate:50,
        },
        axisTick: { // 坐标轴刻度相关设置。
          show: false,
        },
        axisLine: { // 坐标轴轴线相关设置
          lineStyle: {
            color: 'rgba(164,176,226,.5)',
            opacity: 0.2,
          },
        },
        splitLine: { // 坐标轴在 grid 区域中的分隔线。
          show: false,
        },

      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#f00',
          },
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      yAxis: [
        {
          name: '在线人数',
          nameTextStyle: {
            color: 'rgba(164,176,226,.5)',
            fontSize: 14,
          },
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(164,176,226,.5)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(164,176,226,.5)',
            },
          },
        },
        {
          name: '新增人数',
          nameTextStyle: {
            color: 'rgba(164,176,226,.5)',
            fontSize: 14,
          },
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(164,176,226,.5)',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(164,176,226,.5)',
            },
          },
        },
      ],
      series,
    };
    option && myChart.setOption(option);
  }
  // 动态添加数据

  render() {
    return (
      <div className={css.echarts_box}>
        <div ref={this.myRef} style={{ width: '100%', height: '100%' }} />
      </div>
    );
  }
}

export default index;
